<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
    <header id="header" class="header" th:fragment="header">
    <div class="header-inner">
        <div class="site-brand-wrapper">
            <div class="site-meta">
                <div class="custom-logo-site-title">
                    <a href="" class="brand" rel="start">
                        <span class="logo-line-before"><i></i></span>
                        <span class="site-title">Kyrie&nbsp;Cao</span>
                        <span class="logo-line-after"><i></i></span>
                    </a>
                </div>
                <p class="site-subtitle">Trust yourself！</p>
            </div>
            <div class="site-nav-toggle">
                <button>
                    <span class="btn-bar"></span>
                    <span class="btn-bar"></span>
                    <span class="btn-bar"></span>
                </button>
            </div>
        </div>
        <nav class="site-nav">
            <ul id="menu" class="menu">
                <li id="index" class="menu-item menu-item-home">
                    <a href="/" rel="section">
                        <i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页
                    </a>
                </li>
                <li id="archives" class="menu-item menu-item-archives">
                    <a href="/archives" rel="section">
                        <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>归档
                    </a>
                </li>
                <li id="categories" class="menu-item menu-item-categories">
                    <a href="/categories" rel="section">
                        <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
                        分类
                    </a>
                </li>
                <li id="tags" class="menu-item menu-item-tags">
                    <a href="/tags" rel="section">
                        <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签
                    </a>
                </li>
                <li id="about" class="menu-item menu-item-about">
                    <a href="/about" rel="section">
                        <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
                        关于
                    </a>
                </li>
                <!--<li class="menu-item menu-item-search">-->
                    <!--<a href="javascript:" class="popup-trigger">-->
                        <!--<i class="menu-item-icon fa fa-search fa-fw"></i> <br>搜索-->
                    <!--</a>-->
                <!--</li>-->
            </ul>
            <div class="site-search">
                <div class="algolia-popup popup search-popup">
                    <div class="algolia-search">
                        <div class="algolia-search-input-icon">
                            <i class="fa fa-search"></i>
                        </div>
                        <div class="algolia-search-input" id="algolia-search-input">

                        </div>
                    </div>
                    <div class="algolia-results">
                        <div id="algolia-stats"></div>
                        <div id="algolia-hits"></div>
                        <div id="algolia-pagination" class="algolia-pagination"></div>
                    </div>
                    <span class="popup-btn-close"><i class="fa fa-times-circle"></i></span>
                </div>
            </div>
        </nav>
    </div>
</header>
</body>
</html>